<template>
  <div class="app-container">
    <el-row>
      <el-col>
        <!--        搜索表单-->
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="88px">
          <el-form-item label="关键词" prop="keyword">
            <el-input :model="queryParams.keyword" placeholder="请输入关键词" clearable
                      @keyup.enter.native="handleQuery"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <!--        顶部的修改，删除按钮-->
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="success"
                       plain
                       icon="el-icon-edit"
                       size="mini"
                       :disabled="single"
                       @click="handleUpdate"
                       v-hasPermi="['datasourceBase:edit']"
            >修改
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="danger"
                       plain
                       icon="el-icon-delete"
                       size="mini"
                       :disabled="multiple"
                       @click="handleDelete"
                       v-hasPermi="['datasourceBase:remove']"
            >删除
            </el-button>
          </el-col>
          <right-toolbar @queryTable="getList"></right-toolbar>
        </el-row>
        <!--        表格-->
        <el-table v-loading="loading" :data="databaseList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column type="index" width="50" align="center" label="序号"></el-table-column>
          <el-table-column label="数据库名称" align="center" prop="dbName" width="120" />
          <el-table-column label="数据库别名" align="center" prop="dbNickName" width="120" />
          <el-table-column label="数据库类型" align="center" prop="dbType" width="120" />
          <el-table-column label="所在平台"
                           align="center"
                           prop="datasourceSystemName"
                           :show-overflow-tooltip="true" />
          <el-table-column label="登记时间" align="center" prop="createTime" />
          <el-table-column label="数据资源url" align="center" prop="originUrl" />
          <el-table-column label="备注" align="center" prop="remark" />
          <el-table-column label="操作"
                           align="center"
                           class-name="small-padding fixed-width"
                           fixed="right"
                           width="200">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
                         v-hasPermi="['datasourceBase:edit']"
              >修改
              </el-button>
              <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
                         v-hasPermi="['datasourceBase:remove']"
              >删除
              </el-button>
              <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDetail(scope.row)"
                         v-hasPermi="['datasourceBase:remove']"
              >详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="databaseTotal>0" :total="databaseTotal" :page.sync="queryParams.currPage"
                    :limit.sync="queryParams.pageSize" @pagination="getList"
        />
        <!--    修改弹窗-->
        <el-dialog :title="UpdateTitle" :visible.sync="UpdateOpen" width="80%" append-to-body>
          <el-form :model="databaseForm" label-width="120px" :rules="databaseRule" ref="databaseForm">
            <el-row>
              <el-col :span="12">
                <el-form-item label="数据库名称" prop="dbName" required>
                  <el-input placeholder="请输入数据库名称" v-model="databaseForm.dbName" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="数据库别名" prop="dbNickName">
                  <el-input placeholder="请输入数据库别名" v-model="databaseForm.dbNickName"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="数据库类型" prop="dbType">
                  <el-input placeholder="请输入数据库别名" v-model="databaseForm.dbType" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="前导库" prop="originDatasourceDbIdList">
                  <el-select
                    v-model="databaseForm.originDatasourceDbIdList"
                    multiple
                    filterable
                    remote
                    reserve-keyword
                    placeholder="请输入关键词进行选择"
                    :remote-method="dbRemoteMethod"
                    :loading="dbLoading"
                  >
                    <el-option
                      v-for="item in dbOptions"
                      :key="item.id"
                      :label="item.dbName"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="所在平台" prop="datasourceSystemId">
                  <el-select
                    v-model="databaseForm.datasourceSystemId"
                    filterable
                    remote
                    reserve-keyword
                    placeholder="请输入关键词进行选择"
                    :remote-method="systemRemoteMethod"
                    :loading="systemLoading"
                  >
                    <el-option
                      v-for="item in systemOptions"
                      :key="item.id"
                      :label="item.systemName"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="数据资源文件" prop="originUrl">
                  <el-upload
                    class="upload-demo"
                    action=""
                    :multiple=false
                    :before-upload="handleFileUpload"
                    list-type="text"
                    v-model="databaseForm.originUrl"
                  >
                    <el-button size="small" type="primary">点击上传</el-button>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-form-item label="备注" prop="remark" required>
                <el-input v-model="databaseForm.remark"
                          placeholder="请输入详细介绍"
                          type="textarea"
                          maxlength="1000"
                          show-word-limit
                />
              </el-form-item>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer" prop="status">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </el-dialog>

        <!--        详情弹窗-->
        <el-dialog :title="DetailTitle" :visible.sync="DetailOpen" width="80%" append-to-body>
          <el-form :model="databaseForm" label-width="120px" :rules="databaseRule" ref="databaseForm">
            <el-row>
              <el-col :span="12">
                <el-form-item label="数据库名称" prop="dbName" required>
                  <el-input placeholder="请输入数据库名称" v-model="databaseForm.dbName" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="数据库别名" prop="dbNickName">
                  <el-input placeholder="请输入数据库别名" v-model="databaseForm.dbNickName" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="数据库类型" prop="dbType">
                  <el-input placeholder="请输入数据库别名" v-model="databaseForm.dbType" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="所在平台" prop="datasourceSystemName">
                  <el-input placeholder="请输入数据库别名"
                            v-model="databaseForm.datasourceSystemName"
                            disabled
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-form-item label="备注" prop="remark" required>
                <el-input v-model="databaseForm.remark"
                          placeholder="请输入详细介绍"
                          type="textarea"
                          maxlength="1000"
                          show-word-limit
                          disabled
                />
              </el-form-item>
            </el-row>
            <el-row>
              //TODO 前导库关系图
              <el-form-item label="前导库关系图">

              </el-form-item>
            </el-row>
            <el-row>
            </el-row>
          </el-form>
        </el-dialog>
      </el-col>
    </el-row>
  </div>
</template>
<script>

import {
  databaseAll,
  databaseDel,
  databaseEdit,
  databaseList,
  resourceFileUpload
} from '@/api/qysj/app/rawData/Database'
import { platformAll } from '@/api/qysj/app/rawData/platformSystem'

export default {
  name: 'DataBase',
  data() {
    return {
      // 查询参数
      queryParams: {
        keyword: '',
        pageSize: 10,
        currPage: 1
      },
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 加载表格
      loading: false,
      // 平台列表
      databaseList: [],
      // 平台总数
      databaseTotal: 0,
      // 新增表单标题
      UpdateTitle: '',
      // 弹出框状态
      UpdateOpen: false,
      // 详情表单标题
      DetailTitle: '',
      DetailOpen: false,
      // 数据库表单
      databaseForm: {
        dbType: [] // 选中的数据库类型
      },
      // 数据通道类型列表
      dataBaseTypeList: [],
      // // 选中的数据类型
      // dbType:[],

      // 表单校验
      databaseRule: {
        dbName: [
          { required: true, message: '请输入数据库名称', trigger: 'blur' }
        ],
        remark: [
          { required: true, message: '请输入备注信息', trigger: 'blur' }
        ]
      },
      // 前导库多选框相关
      systemOptions: [],
      dbValue: [],
      list: [],
      dbLoading: false,
      selIds: [],
      // 平台选择框
      systemValue: null,
      dbOptions: [],
      systemLoading: false,
      // 请求数据通道类型参数
      dataBaseTypeQuery: {
        dictType: 'database_type'
      }
    }

  },
  created() {
    this.getList()
  },
  methods: {
    // 获取列表
    getList() {
      databaseList(this.queryParams).then(res => {
        if (res.code === 200) {
          this.databaseList = res.rows
          this.databaseTotal = res.total
        } else {
          this.$message(res.msg)
        }
      })
    },
    // 多选框处理
    handleSelectionChange(selection) {
      this.selIds = selection.map((item) => item.id)
      // console.log('selItems', this.selIds,this.selIds.join(','))
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    // 搜索按钮
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    // 重置按钮
    resetQuery() {
      this.resetForm('queryForm')//全局方法
      this.handleQuery()
    },
    //新增按钮
    handleAdd() {
      this.UpdateOpen = true
      this.UpdateTitle = '新增平台信息'
    },
    // 修改按钮
    handleUpdate(data) {
      this.UpdateOpen = true
      this.UpdateTitle = '修改平台信息'
      this.databaseForm = data
    },
    // 删除按钮
    handleDelete(data) {
      const ids = data.id || this.selIds
      databaseDel(ids).then(res => {
        if (res.code) {
          this.$message('删除成功')
          this.getList()
        } else {
          this.$message(res.msg)
        }
      })
    },
    //TODO 详情按钮 //TODO 前导库关系图
    handleDetail(data) {
      this.databaseForm = data
      this.DetailOpen = true
      this.DetailTitle = '数据库详情'
    },
    // 弹出框提交按钮
    submitForm() {
      this.$refs['databaseForm'].validate((vaild) => {
        if (vaild) {
          databaseEdit(JSON.stringify(this.databaseForm)).then(res => {
            if (res.code === 200) {
              this.$message('修改成功')
              this.$refs['databaseForm'].resetFields()
              this.UpdateOpen = false
              this.getList()
            } else {
              this.$message(res.msg)
            }
          })
        }
      })
    },
    // 弹出框取消
    cancel() {
      this.$refs['databaseForm'].resetFields()
    },
    // 前导库多选框
    dbRemoteMethod(query) {
      if (query !== '') {
        this.dbLoading = true
        databaseAll({ keyword: query }).then(res => {
          if (res.code === 200) {
            this.dbLoading = false
            this.dbOptions = res.data
          } else {
            this.dbOptions = []
            this.$message(res.msg)
          }
        })
      } else {
        this.dbOptions = []
      }
    },
    systemRemoteMethod(query) {
      if (query !== '') {
        this.systemLoading = true
        platformAll({ keyword: query }).then(res => {
          if (res.code === 200) {
            this.systemLoading = false
            this.systemOptions = res.data
          } else {
            this.systemOptions = []
            this.$message(res.msg)
          }
        })
      } else {
        this.systemOptions = []
      }
    },
    // 资源文件上传
    handleFileUpload(file) {
      const form = new FormData()
      form.append('file', file)
      resourceFileUpload(form).then(res => {
        if (res.code === 200) {
          this.databaseForm.originUrl = res.url
          this.$message('上传成功')
        } else {
          this.$message(res.msg)
        }
      })
    }
  }
}

</script>
